<template>
  <div class="VisitType">
    <ContentWrap>
      <FormContainer :column="3">
        <el-form ref="form" :model="formData" :rules="formRules1" label-width="80px">
          <!-- <el-form-item prop="id" label="类型编号">
            <el-input v-model="formData.id" placeholder="请输入类型编号" clearable />
          </el-form-item> -->
          <el-form-item label="类型名称" prop="typeName">
            <el-input v-model="formData.typeName" placeholder="请输入类型名称" clearable />
          </el-form-item>
          <el-form-item label="归属业务组" prop="deptCode">
            <!-- <SearchSelectPicker
              url="/call-center/api/v1/departmentInfo/page"
              placeholder="请选择归属组织"
              value-name="deptNo"
              lable-name="deptName"
              :value.sync="formData.deptCode"
            ></SearchSelectPicker> -->
            <SearchSelectPicker
              url="/call-center/api/v1/businessGroup/page"
              placeholder="请选择所属业务组"
              lable-name="groupName"
              value-name="groupNo"
              :value.sync="formData.deptCode"
              multiple
              collapse-tags
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item>
            <Button @click="$refs.form.resetFields()">重置</Button>
            <Button type="primary" enter @click="queryHandle">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>

      <div class="button-container" style="padding-top:0">
        <Button type="primary" @click="openDailog(0)">新增</Button>
      </div>
      <table-box
        ref="table"
        no-request
        :other-filters="otherFilters"
        :table-config="tableConfig"
        @data-change="loading = false"
      >
        <el-table-column label="操作">
          <template slot-scope="scope">
            <Button type="danger" @click="delet(scope.row)">删除</Button>
            <Button type="primary" @click="openDailog(1,scope.row)">修改</Button>
          </template>
        </el-table-column>
      </table-box>
      <el-dialog
        :title="dialogType === 0 ?'新增':'编辑'"
        :visible.sync="dialogVisible"
        :before-close="closeDailog"
        :close-on-click-modal="false"
      >
        <FormContainer :column="2">
          <el-form
            ref="tempData"
            :model="tempData"
            :rules="formRules"
            :show-close="false"
            label-width="80px"
          >
            <el-form-item prop="typeName" label="类型名称">
              <el-input v-model.trim="tempData.typeName" placeholder="请输入类型名称" clearable />
            </el-form-item>
            <el-form-item prop="deptCode" label="归属业务组">
              <!-- <SearchSelectPicker
                url="/call-center/api/v1/departmentInfo/page"
                placeholder="请选择归属组织"
                value-name="deptNo"
                lable-name="deptName"
                :lable.sync="tempData.deptName"
                :value.sync="tempData.deptCode"
              ></SearchSelectPicker> -->
              <SearchSelectPicker
                url="/call-center/api/v1/businessGroup/page"
                placeholder="请选择所属业务组"
                lable-name="groupName"
                value-name="groupNo"
                :lable.sync="tempData.deptName"
                :value.sync="tempData.deptCode"
              ></SearchSelectPicker>
            </el-form-item>
          </el-form>
        </FormContainer>
        <span slot="footer" class="dialog-footer">
          <Button @click="closeDailog">取消</Button>
          <Button
            type="primary"
            @click="confrim"
          >{{ dialogType === 0?'确认':'保存' }}</Button>
        </span>
      </el-dialog>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import SearchSelectPicker from '@/components/SearchSelectPicker'
import {
  callBackTaskTypeAdd,
  callBackTaskTypeUpdate,
  callBackTaskTypeDelete
} from '@/api/callBackTask'
import { filtersRaw } from '@/utils'
export default {
  name: 'VisitType',
  components: {
    ContentWrap,
    FormContainer,
    Button,
    SearchSelectPicker
  },
  data() {
    return {
      dialogType: -1, // t弹窗类型（0新增，1修改）
      dialogVisible: false, // 控制弹窗显示隐藏
      formData: {
        id: '',
        typeName: '',
        deptCode: []
      },
      tempData: {
        // 弹窗数据
        typeName: '',
        deptCode: '',
        deptName: ''
      },
      formRules1: {},
      formRules: {
        typeName: {
          required: true,
          message: '请输入任务类型名称',
          trigger: 'change'
        },
        deptCode: {
          required: true,
          message: '请选择归属组织',
          trigger: 'change'
        }
      },
      loading: false,
      otherFilters: [],
      tableConfig: {
        interfacePath: '/call-center/api/v1/callBackTask/type/page',
        pageFlag: true,
        hideFuncBar: true,
        sort: 'createTime',
        order: 'desc',
        // 表格字段动态配置
        setting: [
          // {
          //   prop: "id",
          //   label: "类型编号"
          // },
          {
            prop: 'typeName',
            label: '类型名称'
          },
          {
            prop: 'deptName',
            label: '归属业务组'
          },
          {
            prop: 'createBy',
            label: '创建人'
          },
          {
            prop: 'createTime',
            label: '创建时间'
          }
        ]
      }
    }
  },
  methods: {
    // 根据条件查询
    queryHandle() {
      this.loading = true
      const list = []
      for (const [k, v] of Object.entries(this.formData)) {
        if (v === null || v === undefined || v === '' || (v instanceof Array && v.length <= 0)) {
          continue
        }
        if (k === 'deptCode') {
          list.push(filtersRaw(k, `[${v.join(',')}]`, 'in'))
        } else if (k === 'typeName') {
          list.push(filtersRaw(k, v, 'like'))
        }
      }
      this.otherFilters = list
      this.refresh()
    },
    refresh(onPage) {
      this.$nextTick(() => {
        this.$refs.table.initTableData(onPage)
      })
    },
    closeDailog() {
      this.$refs.tempData.resetFields()
      this.loading = false
      this.dialogVisible = false
    },
    openDailog(type, row) {
      this.dialogType = type
      if (type === 0) {
        for (const i in this.tempData) {
          this.tempData[i] = ''
        }
      } else {
        this.tempData = JSON.parse(JSON.stringify(row))
      }
      this.dialogVisible = true
    },
    // 弹窗确认s事件
    confrim() {
      return this.$refs.tempData.validate().then(() => {
        if (this.dialogType === 0) {
          return callBackTaskTypeAdd(this.tempData)
            .then(res => {
              if (res.success === 1) {
                this.queryHandle()
                this.closeDailog()
                this.$message({
                  message: '新增任务类型成功!',
                  type: 'success'
                })
              }
            })
            .catch(er => {})
        } else {
          return callBackTaskTypeUpdate(this.tempData)
            .then(res => {
              if (res.success === 1) {
                this.refresh('onPage')
                this.closeDailog()
                this.$message({
                  message: '修改任务类型成功!',
                  type: 'success'
                })
              }
            })
            .catch(er => {})
        }
      })
    },
    // 执行删除
    delet(row) {
      this.$msgbox({
        title: '提示',
        showCancelButton: true,
        type: 'warning',
        message: '确定删除此回访类型？'
      })
        .then(() => {
          callBackTaskTypeDelete(row.id)
            .then(res => {
              if (res.success === 1) {
                this.$message({
                  message: '删除任务类型成功!',
                  type: 'success'
                })
                this.refresh()
              }
            })
            .catch(er => {})
        })
        .catch(e => e)
    }
  }
}
</script>
<style lang='scss' scoped>
.table-click-text {
  color: aqua;
  cursor: pointer;
}
</style>
